<template>
  <div class="header">
    <div class="header-left">
    	<div class="iconfont icon-back">&#xe623;</div>
    </div>
    <div class="header-input"><span class="iconfont icon-search">&#xe645;</span>输入城市/景点/游玩主题</div>
    <router-link to="/city" class="header-right">
    	<div>{{this.$store.state.city}}<span class="iconfont icon-arrow">&#xe6aa;</span></div>
    </router-link>
  </div>
</template>

<script>
export default {
  name: 'HomeHeader',
  data () {
    return {

    }
  },
  methods: {

  }
}
</script>

<style lang="stylus" scoped>
	// 样式引入import前要加@，在样式中引入其他样式文件路径前要加~
	@import "~styles/variable.styl"

	.header
		display: flex
		line-height: $height
		color: #fff
		background: $bgColor
		.header-left
			float: left
			width: .8rem
			.icon-back
				padding-left: .2rem
				font-size: .4rem
		.header-input
			flex: 1
			margin-top: .14rem
			height: .6rem
			line-height: .6rem
			color: #ccc
			background: #fff
			border-radius: .1rem
			.icon-search
				padding: 0 .1rem 0 .2rem
		.header-right
			float: left
			padding: 0 .1rem
			min-width: 1.08rem
			text-align: center
			color:#fff

</style>
